import { memo, useEffect, useState } from "react";
import classNames from 'classnames'

import { BrowserWrapper } from "./style";
import IconArrowLeft from "../../asset/svgs/icon_arrow_left";
import IconArrowRight from "../../asset/svgs/icon_arrow_right";
import IconClose from "../../asset/svgs/icon_close";
import { shallowEqual, useSelector } from "react-redux";
import IconTriangleArrowBottom from "../../asset/svgs/icon_trigleBottom";
import IconTriangleArrowTop from "../../asset/svgs/icon_trigleTop";
import { Indicator } from "../indicator";

export const PictureBrowser = memo(
    (props) => {

        useEffect(() => {
            document.body.style.overflow = "hidden";
            return (() => {
                document.body.style.overflow = "auto";
            })
        },[])
        
        const {picture_urls} =  useSelector((state) => {
            return {
                picture_urls:state.detail.roomInfo.picture_urls
            }
        }, [shallowEqual])
        
      const { closeClick } = props;
        const [currentIndex, setcurrentIndex] = useState(0);
        const [showList, setShowList] = useState(true);
      const setIndex = (isNext) => {
          let newIndex = currentIndex;
          if (isNext) {
              newIndex = newIndex + 1;
              if (newIndex > picture_urls?.length - 1) {
                  newIndex = 0;
              }
          }
          else {
              newIndex = newIndex - 1;
              if (newIndex < 0) {
                  newIndex = picture_urls?.length-1;
              }
          }
          setcurrentIndex(newIndex);
      }
        
        return (
            <BrowserWrapper>
                <div className="browser">
                    <div className="close" onClick={()=>closeClick()}>
                        <IconClose></IconClose>
                    </div>
                    <div className="b-content">
                        <div className="top"></div>
                        <img src={picture_urls?.[currentIndex]} alt="" />
                        <div className="bottom">
                            {/* <div className="info">
                               <div>{currentIndex}/{picture_urls.length}:room Apartment图片{currentIndex}</div>
                                <div>{showList}?"隐藏照片列表"<IconTriangleArrowBottom/>:<IconTriangleArrowTop/></div>
                            </div> */}
                            <div className="list">
                                <Indicator selectIndex = {currentIndex}>
                                    {picture_urls?.map((item,index) => {
                                        return (
                                            <div className="item-picture" onClick={e=>setcurrentIndex(index)}>
                                                 <img src={item} key={item} />
                                                 <div className={classNames('cover',{'active':currentIndex===index})}></div>
                                            </div>
                                        )
                                    })}
                                </Indicator>
                            </div>
                        </div>
                    </div>
                    <div className="control">
                        <div className="left btn" onClick={()=>setIndex(false)}>
                            <IconArrowLeft width={77} height={77}></IconArrowLeft>
                        </div>
                        <div className="right btn" onClick={()=>setIndex(true)}>
                            <IconArrowRight width={77} height={77}></IconArrowRight>
                        </div>
                    </div>
                </div>
            </BrowserWrapper>
        )
    }
)